大家好

繼續昨天的緞帶
為了把平面的緞帶作的有點立體
今天稍微加了點弧度

<div class="ribbon">
   <div class="content">RIBBON</div>
</div>

.ribbon {
    padding: 20px;    
    margin: 50px auto;
    position: relative;
    width: 200px;
    font-size: 30px;
    color: #333;
    text-align: center;
    border-radius: 120px 120px 0 0/ 35px 35px 0 0;
    background-image: radial-gradient(closest-side at 120px 70px, #fff , #fff 97px, #BF360C 98px, #FF5722 110px);
    background-position: 0px 77px;
}

這裡的 border-radius 加了 / 做出了上面有弧度的效果
原本在沒有 / 時弧度的寬和高的比例會是 1：1
加了 / 前後2部分就能作出弧度的長和寬
這裡的長、寬尺寸是不能用負
所以另外用 background-image 漸層作了一個假的弧度
接著作出折痕陰影及緞帶尾端

.content:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: #BF360C transparent;
    bottom: -15px;
    left: 0;
    border-width: 15px 0 0 20px;
}
.content:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: #BF360C transparent;
    bottom: -15px;
    right: 0;
    border-width: 15px 20px 0 0;
}
.ribbon:before {
    content: "";
    position: absolute;
    bottom: -15px;
    border: 25px solid #E64A19;
    z-index: -1;
    left: -50px;
    border-right-width: 45px;
    border-left-color: transparent;
}
.ribbon:after {
    content: "";
    position: absolute;
    bottom: -15px;
    border: 25px solid #E64A19;
    z-index: -1;
    right: -50px;
    border-left-width: 45px;
    border-right-color: transparent;
}

就完成了
--- 明日待續。